<template>
    <div class="comment">
        <van-nav-bar
        border
        title="订单详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        />
        <div class="picture">
            <img width="140" style="border-radius:50%" :src="details.customer.imgPhoto" alt="">
        </div>
        <div class="commentgrey">
            <div>产品名称:{{details['orderLines'][0]['product']['name']}} 下单次数:x{{details.orderLines[0].number}}</div>
            <div>总价:{{details.total}}</div>
            <div>服务时间:{{details.orderTime | dateParse}}</div>
            <div>服务地点:{{(((details==null)?'0':details.address)==null)?'':(details.address.province+details.address.city+details.address.area+details.address.address)}}</div>
        </div>
        <div class="footer">
            <div>我的评价:{{details.customer.comment==''?'':details.customer.comment}}</div>
            <div style="float:right;margin-right:30px"><van-button plain color="#ffb799" size="mini" type="info" @click="toComment">评论</van-button></div>
        </div>
        <van-dialog v-model="show" title="评论" show-cancel-button @confirm="saveComment">
            <van-field
                v-model="message"
                rows="4"
                autosize
                label="评论内容"
                type="textarea"
                placeholder="请输入评论内容"
            />
        </van-dialog>
        
    </div>
</template>
<script>
import {mapState,mapActions} from 'vuex'
import { Toast } from 'vant';
export default {
    data(){
        return{
            active:'two',
            show:false,
            message:''
        }
    },
    created(){
        this.finddetails(this.$route.query.id)
    },
    computed:{
        ...mapState('order',['details'])
    },
    methods:{
        ...mapActions('order',['finddetails']),
        ...mapActions('comment',['saveCommentData']),
        onClickLeft(){
            this.$router.push({path:'order'})
        },
        toComment(){
            this.show= true
        },
        saveComment(){
            let id=localStorage.getItem('id')
            let obj = {
                id:this.details['orderLines'][0]['id'],
                content:this.message,
                orderId:this.details.id,
                cusId:id,
                status:'未审核'
            }
            this.saveCommentData(obj).then(res=>{
                Toast('保存成功');
            })
        }
    }
}
</script>
<style  scoped>
.comment{
    width: 100%;
    height:100%;
}
.commentgrey{
    border-radius: 5px;
    background-color: #f1f1f1;
    margin: 0 auto;
    width: 90%;
    padding: 10px;
}
.commentgrey>div{
    margin: 10px;
}
.picture{
    width: 140px;
    height: 140px;
    margin: 28px auto;
}
.footer>div{
    display: inline-block;
    margin: 10px;
}
</style>